<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      th:replace="header">
<div th:fragment="content">
    <div class="row">
        <div class="col-lg-12">
            <div class="card">
                <div class="card-header">
                    <h4>人员管理-教师管理</h4>
<!--                    <form class="pull-right search-bar" method="get" action="#!" role="form">-->
<!--                        <div class="input-group">-->
<!--                            <div class="input-group-btn">-->
<!--                                <input type="hidden" name="search_field" id="search-field" value="title">-->
<!--                                <button class="btn btn-default dropdown-toggle" id="search-btn" data-toggle="dropdown" type="button" aria-haspopup="true" aria-expanded="false">-->
<!--                                    搜索 <span class="caret"></span>-->
<!--                                </button>-->
<!--                                <ul class="dropdown-menu">-->
<!--                                    <li> <a tabindex="-1" href="javascript:void(0)" data-field="title">工号</a> </li>-->
<!--                                    <li> <a tabindex="-1" href="javascript:void(0)" data-field="cat_name">姓名</a> </li>-->
<!--                                    <li> <a tabindex="-1" href="javascript:void(0)" data-field="cat_name">手机号</a> </li>-->
<!--                                </ul>-->
<!--                            </div>-->
<!--                            <input type="text" class="form-control" value="" name="keyword" placeholder="请输入名称">-->
<!--                        </div>-->
<!--                    </form>-->

                </div>
                <div class="card-toolbar clearfix">
                    <div class="toolbar-btn-action">
                        <a class="btn btn-primary m-r-5" href="javascript:showModel()"><i class="mdi mdi-plus"></i> 新增</a>
                    </div>
                </div>
                <div class="card-body">

                    <div class="table-responsive">
                        <table class="table table-bordered table-striped table-vcenter">
                            <thead>
                                <tr>
                                    <th>工号</th>
                                    <th>姓名</th>
                                    <th>手机号</th>
                                    <th>登录密码</th>
                                    <th>添加时间</th>
                                    <th>最后修改时间</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr th:each="teacher : ${teacherList.getRecords()}" th:id="'teacher-'+${teacher.getTid()}">
                                    <td th:id="'tno-'+ ${teacher.getTid()}" th:text="${teacher.getTno()}">20200220</td>
                                    <td th:id="'tname-'+ ${teacher.getTid()}" th:text="${teacher.getTname()}">许昭</td>
                                    <td th:id="'tphone-'+ ${teacher.getTid()}" th:text="${teacher.getTphone()}">139****5464</td>
                                    <td th:id="'tpassword-'+ ${teacher.getTid()}" th:text="${teacher.getTpassword()}">**********</td>
                                    <td th:text="${#dates.format(teacher.getGmtCreate(), 'yyyy-MM-dd HH:mm:ss')}">2020/02-20 12:12:12</td>
                                    <td th:text="${#dates.format(teacher.getGmtModified(), 'yyyy-MM-dd HH:mm:ss')}">2020/02-20 12:12:12</td>
                                    <td>
                                        <div class="btn-group">
                                            <a class="btn btn-xs btn-info" th:href="'javascript:edit(\''+ ${teacher.getTid()} +'\')'" title="编辑" data-toggle="tooltip"><i class="mdi mdi-pencil"></i></a>
                                            <a style="margin-left: 12px" class="btn btn-xs btn-danger"  th:href="'javascript:delAjax(\''+ ${teacher.getTid()} +'\')'" title="删除" data-toggle="tooltip"><i class="mdi mdi-window-close"></i></a>
                                        </div>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <!-- 分页码 -->
                    <ul class="pagination">
                        <!-- 第一页按钮 -->
                        <li th:class="${teacherList.hasPrevious()?'':'disabled'}" >
                            <a th:href="${teacherList.hasPrevious()?('/Teacher/Teacher?p='+(teacherList.getCurrent()-1)):'javascript:return false;'}">«</a>
                        </li>
                        <!-- 中间按钮 -->
                        <li th:each="i : ${#numbers.sequence(
                        (teacherList.getCurrent()>3?teacherList.getCurrent()-2:1)
                        , (teacherList.getCurrent()<(teacherList.getPages()-2)?teacherList.getCurrent()+2:teacherList.getPages())
                        )}"
                            th:class="${teacherList.getCurrent()==i?'active':''}"
                        >
                            <a th:href="'/Teacher/Teacher?p='+ ${i}"
                               th:text="${i}"
                            >???</a>
                        </li>
                        <!-- 最后一页按钮 -->
                        <li  th:class="${teacherList.hasNext()?'':'disabled'}" >
                            <a th:href="${teacherList.hasNext()?('/Teacher/Teacher?p='+(teacherList.getCurrent()+1)):'javascript:return false;'}">»</a>
                        </li>
                        <li><span th:text="'共 '+ ${teacherList.getCurrent()} +' / '+ ${teacherList.getPages()} +' 页' ">共 0 / 0 页</span></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <div id="model" hidden>
        <div class="card">
            <div class="card-body">
                <div class="form-group">
                    <input type="text" id="tid" name="tid" value="" style="display: none">
                    <label class="col-xs-12" for="tno">工号:</label>
                    <input id="tno" name="tno" class="form-control" type="text" placeholder="请输入教师工号">
                </div>
                <div class="form-group">
                    <label class="col-xs-12" for="name">姓名:</label>
                    <input class="form-control" type="text" id="name" name="name" placeholder="请输入教师姓名">
                </div>

                <div class="form-group">
                    <label class="col-xs-12" for="phone">手机号:</label>
                    <input class="form-control" type="text" id="phone" name="phone" placeholder="请输入教师手机号">
                </div>

                <div class="form-group">
                    <label class="col-xs-12" for="password">密码 :</label>
                    <input class="form-control" type="password" id="password" name="password" placeholder="请输入教师登录密码">
                </div>

                <div class="form-group">
                    <button class="btn btn-block btn-round btn-primary" onclick="submit()">提交</button>
                </div>
            </div>
        </div>
    </div>

    <script src="/assets/js/jconfirm/jquery-confirm.min.js"></script>
    <script type="text/javascript" src="/assets/js/layer/layer.js"></script>
    <script>

        function reset() {
            $("#tid").val("")
            $("#tno").val("")
            $("#name").val("")
            $("#phone").val("")
            $("#password").val("")
        }

        function edit(id) {
            showModel("编辑");
            $("#tid").val(id)
            $("#tno").val($("#tno-"+id).text())
            $("#name").val($("#tname-"+id).text())
            $("#phone").val($("#tphone-"+id).text())
            $("#password").val($("#tpassword-"+id).text())
        }

        function showModel(title = "新增") {
            layer.open({
                type: 1,
                title:title+'教师信息',
                skin: 'layui-layer-rim', //加上边框
                area: ['550px', '500px'], //宽高
                content: $('#model')
            });
        }

        function submit() {
            let tid = $("#tid").val()
            let tno = $("#tno").val()
            let tname = $("#name").val()
            let tphone = $("#phone").val()
            let tpassword = $("#password").val()

            lightyear.loading("show")
            $.ajax({
                type: "POST",
                url: "/Teacher/Save",
                dataType: "json",
                data: {
                    "tid": $("#tid").val()
                    ,"tno": $("#tno").val()
                    ,"tname": $("#name").val()
                    ,"tphone": $("#phone").val()
                    ,"tpassword": $("#password").val()
                },
                success: function (data, status) {
                    console.log(data)
                    lightyear.loading('hide');
                    if (status === "success") {
                        if (data.code === 200){
                            lightyear.notify('您成功保存(修改)了一位教师的信息', 'success', 500);
                            location.reload();
                        } else{
                            console.log("后端拒绝")
                            lightyear.notify(data.msg, 'danger', 3000);
                        }
                    }else{
                        console.log("网络问题")
                        lightyear.notify('网络不可用，请稍候再试！！！', 'danger', 3000);
                    }
                },
                error: function (xhr, errorText, errorType) {
                    lightyear.loading('hide');
                    lightyear.notify('服务器错误，请稍后再试~', 'danger', 2000);
                }
            });



        }

        /**
         * 异步删除教师
         * @param id
         */
        function delAjax(id){
            lightyear.loading("show")
            $.ajax({
                type: "POST",
                url: "/Teacher/Del",
                dataType: "json",
                data: {
                    "tid": id,
                },
                success: function (data, status) {
                    console.log(data)
                    lightyear.loading('hide');
                    if (status === "success") {
                        if (data.code === 200){
                            lightyear.notify('您成功删除了一个模板~', 'success', 1000);
                            $("#teacher-" + id).remove();
                        } else{
                            console.log("后端拒绝")
                            lightyear.notify(data.msg, 'danger', 3000);
                        }
                    }else{
                        console.log("网络问题")
                        lightyear.notify('网络不可用，请稍候再试！！！', 'danger', 3000);
                    }
                },
                error: function (xhr, errorText, errorType) {
                    lightyear.loading('hide');
                    lightyear.notify('服务器错误，请稍后再试~', 'danger', 2000);
                }
            });

        }
    </script>
</div>
</html>